<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>盒子外边距margin的使用</title>
<style type="text/css">
/*
<!--
.span{
	background-color:#a2d2ff;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px;			虽然只有写10px，但其实表示上右下左内边距均为10px
}
span.left{								
	margin-right:30px;
	background-color:#a9d6ff;
}
span.right{
	margin-left:40px;
	background-color:#eeb0b0;
}
-->
*/
/*
<!--
div{
	background-color:#a2d2ff;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	fony-size:12px;
	padding:10px;
}
-->
*/
<!--
span{
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	padding:12px;
	border:1px dashed #000000;
}
span.left{
	margin-right:30px;
	background-color:#a9d6ff;
}
span.right{
	margin-left:-53px;			/*可以设置为负数，这样就可以使得子块从父块中“分离”出来*/
	background-color:#eeb0b0;
}
-->
</style>
	</head>
<body>
	<span class="left">行内元素1</span><span class="right">行内元素2</span>		<!--span表示的是行级元素-->
	<p><b>注意：</b>这两个span左右之间的外边距之和为30px+40px=70px</p>
	<h2><font color="#FF0000">为什么CSS部分不能写成:<br />span left{<br />}<br />或span right{<br />}</font></h2>
	<hr color="#e0e0e0" />
	
	<div style="margin-bottom:50px;">块元素1</div>
	<div style="margin-top:30px;">块元素2</div>
	<p><b>注意：</b>这两个div上下之间外边距并不是30px+50px=80px，而是两者之中最大者，即为50px.<br />
	<font color="#FF0000"><b>因此除需要区分span和div的排列方式不同外，距离的标准也不同</b></font>
	</p>
	<hr color="#CC9999" /><br /><br />
	
	<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
</html>